<script setup>
import { ref } from 'vue';
import { getMessagelist } from '@/api/message';
import { onMounted } from 'vue';
import { NavBar, showToast } from 'vant';
// 导入路由
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

// 定义一个mes存放请求回来的数据,点那个就显示那个的聊天记录
const mes = ref([])
// 定义一个变量存储id
const id = window.localStorage.getItem('id')
console.log(id);
// 定义一个变量存储处理后的聊天记录
const all_messages = ref([])
const all_messages1 = ref([])

const all_messages2 = ref([])

// 定义一个变量用于资料的显示
const showIfo = ref(false)
// 定义一个资料卡显示的名字和照片
const showPerson = ref('')

/* getMessagelist().then(res => {
    console.log('假数据', res);
    mes.value =  res.data.message.filter(item => {
        return item.id == window.localStorage.getItem('id')
    })
    console.log('存储起来的数据',mes.value);
}) */

// 资料卡点击实现
// function onShowIfo() {
//     // 资料卡的显示状态
//     showIfo.value = !showIfo.value
//     console.log('传入的id', id);
//     // 根据id筛选对应的数据
//     showPerson.value = mes.value.filter(item => {
//         return item.id == id
//     })
//     console.log('触发的名字showPerson', showPerson.value);

// }
function onShowIfo() {
    // 跳转

    router.push('/friendinfor')
}



onMounted(async () => {
    // async function fn() {
    const res = await getMessagelist()
    console.log(res.data.message);
    mes.value = res.data.message.filter(item => {
        return item.id == window.localStorage.getItem('id')
    }) 
    
    console.log('假数据长度', mes.value.length)
    console.log('假数据', mes.value)
    if (mes.value.length) {
        console.log('执行');
        all_messages.value = mes.value[0].all_messages.split(',') //存放所有聊天记录
        all_messages1.value = all_messages.value.filter((item, index) => index % 2 === 0) //截取奇数的数据
        all_messages2.value = id == '2' ? [] : all_messages.value.filter((item, index) => index % 2 !== 0) //截取偶数的数据
    } else {
        console.log('不执行，手写拼接数据');
        const nickname = window.localStorage.getItem('nickname')
        mes.value = [{
            'id':id,
            nickname,
            information:'',
            all_messages:'',
            information_number:5,
            url:'https://tse3-mm.cn.bing.net/th/id/OIP-C.5vkAB5zZd3ymMN7a3qi_9wHaHa?w=186&h=186&c=7&r=0&o=5&dpr=1.3&pid=1.7'
        }]
        console.log(mes.value);
    }
})
// onMounted(async () => {
//     // async function fn() {
//     const res = await getMessagelist()
//     mes.value = res.data.message.filter(item => {
//         return item.id == window.localStorage.getItem('id')
//     })
//     console.log('假数据', mes.value)
//     all_messages.value = mes.value[0].all_messages.split(',') //存放所有聊天记录
//     all_messages1.value = all_messages.value.filter((item, index) => index % 2 === 0) //截取奇数的数据
//     all_messages2.value = id == '2' ? [] : all_messages.value.filter((item, index) => index % 2 !== 0) //截取偶数的数据

// })
const onClickLeft = () => {
    router.push('message/information')
}

const onClickRight = () => showToast('按钮');

// 发送按钮
let height = ref(1)


// 我发的消息
const all_messages3 = ref([])

function send() {
    let text = document.querySelector('#textarea').value;
    if (!text) {
        alert('请输入内容');
        return;
    }
    // console.log(text);
    height = document.querySelector('.content').scrollHeight;
    if (id === '2') {
        console.log('状态2');
        all_messages3.value.push(text)
        console.log(all_messages3.value);
        // all_messages2.value.push(text)

        // all_messages.value.push('自动回复：“对方不在线，下面是她给您的留言”')
        // all_messages.value.push('你去死吧！！！')

    } else if (id !== '0') {
        all_messages2.value.push(text)
        all_messages1.value.push('我下线啦，上线后再回你。着急的话call我电话:17861834402')
    } else {
        console.log(11);
        all_messages2.value.push(text)
        all_messages1.value.push('您已掉线，请重新请求一下吧')
    }

    // console.log('我发的', all_messages3.value);

    // console.log('联系人2新信息', all_messages2.value);
    // console.log('联系人1信息', all_messages1.value);
    height = document.querySelector('.content').scrollHeight;
    // console.log('加了新数据后的高度', height)
    // console.log('之前的滚动距离', document.querySelector(".content").scrollTop);
    document.querySelector(".content").scrollTop = height;
    // console.log('新的滚动距离', document.querySelector(".content").scrollTop);
}
</script>

<template>
    <!-- 顶部返回、显示区域 -->
    <van-nav-bar v-if="mes[0]" :title="mes[0].nickname" left-text="返回" left-arrow @click-left="onClickLeft"
        @click-right="onShowIfo">
        <template #right>
            <van-icon class="iconfont icon-gengduo" />

        </template>
    </van-nav-bar>
    <div class="box">
        <div class="content" v-if="mes[0]">
            <div class="item item-center"><span>昨天 12:35</span></div>
            <div class="item item-center"><span>你已添加了{{ mes[0].nickname }}，现在可以开始聊天了。</span></div>

            <div 
                v-for="(item, index) in all_messages1.length > all_messages2.length && id != 2 ? all_messages1 : id != 2 ? all_messages2 : all_messages">
                <!-- 左联系人 -->
                <div class="item item-left">
                    <div class="avatar"><img :src="mes[0].url" /></div>
                    <div class="bubble bubble-left">
                        {{ id === '2' ? all_messages[index] :
                            all_messages1[index] ? all_messages1[index] : '对方不在线了' }}
                    </div>
                    <!-- <div class="bubble bubble-left">{{ id == 2 ? all_messages[index] :
                                    all_messages1[index] ? all_messages1[index] : id == 0 ?'您已掉线，请重新请求一下吧':'我下线啦，上线后再回你。着急的话call我电话:17861834402' }}</div> -->
                </div>
                <!-- 右联系人 -->
                <div v-if="id !== '2'" class="item item-right">
                    <div v-if="all_messages2[index]" class="bubble bubble-right">{{ all_messages2[index] }}</div>
                    <div v-if="all_messages2[index]" class="avatar"><img
                            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.O_KI-zKPPp_-Zz7Hd6J8qwAAAA?w=201&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
                    </div>
                </div>

                <!-- <div  v-if="id == '2'"  class="item item-right">
                                <div v-if="all_messages2[index]" class="bubble bubble-right">{{ all_messages2[index] }}</div>
                                <div v-if="all_messages2[index]" class="avatar"><img
                                        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.O_KI-zKPPp_-Zz7Hd6J8qwAAAA?w=201&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
                                </div>
                            </div> -->

            </div>
            <!-- 右联系人追加的数据 -->
            <!-- 右联系人 -->
            <div v-if="all_messages3" v-for="(item, index) in all_messages3" class="item item-right">
                <div class="bubble bubble-right">{{ item }}</div>
                <div class="avatar"><img
                        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.O_KI-zKPPp_-Zz7Hd6J8qwAAAA?w=201&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
                </div>
            </div>
        </div>

    </div>
    <div class="input-area">
        <textarea name="text" id="textarea"></textarea>
        <div class="button-area">
            <!-- <button id="send-btn" @click="send()">发 送</button> -->
            <button id="send-btn" @click="send">发 送</button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.footer {
    display: none;
}

.van-card {
    width: 375px;
    height: 200px;
    position: fixed;
    top: 30%;

    background-color: #6ad7ea;
}

.icon-gengduo {
    font-size: 35px;
    color: black;
    font-weight: 700;
}

.van-nav-bar__left,
.van-nav-bar__right {
    padding: 0px 0px;
}



* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    height: 760px;
    width: 900px;
    border-radius: 4px;
    border: 0.5px solid #e0e0e0;
    background-color: #f5f5f5;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.content {
    width: calc(100% - 40px);
    // height: 100%;
    padding: 20px;
    overflow-y: scroll;
    flex: 1;

}



.bubble {
    max-width: 400px;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    color: #000;
    word-wrap: break-word;
    word-break: normal;
}

.item-left .bubble {
    margin-left: 15px;
    background-color: #fff;
}

.item-left .bubble:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
    left: -20px;
}

.item-right .bubble {
    margin-right: 15px;
    background-color: #9eea6a;
}

.item-right .bubble:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid #9eea6a;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    right: -20px;
}

.item {
    margin-top: 15px;
    display: flex;
    width: 100%;
}

.item.item-right {
    justify-content: flex-end;
}

.item.item-center {
    justify-content: center;
}

.item.item-center span {
    font-size: 12px;
    padding: 2px 4px;
    color: #fff;
    background-color: #dadada;
    border-radius: 3px;

}

.avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.input-area {
    border-top: 0.5px solid #e0e0e0;
    height: 150px;
    display: flex;
    flex-flow: column;
    background-color: #fff;
    position: relative;
}

textarea {
    flex: 1;
    padding: 5px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
    resize: none;
}

.button-area {
    display: flex;
    height: 40px;
    margin-right: 10px;
    line-height: 40px;
    padding: 5px;
    justify-content: flex-end;
    position: absolute;
    bottom: 50px;
    right: 10px;
}

.button-area button {
    width: 80px;
    border: none;
    outline: none;
    border-radius: 4px;
    float: right;
    cursor: pointer;
}
</style>